<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./project/lib/element-plus.css">
    <script src="./project/lib/vue3.4.21.js"></script>
    <script src="./project/lib/element-plus.js"></script>
</head>
<style>
    .el-dialog img{
        width:100%;
        height:auto;
    }
</style>
<body>
    </pre>
    <h1>example02注册表单</h1>
    <div id="app">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="dataForm"
        :rules="rules"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
            <el-input v-model="dataForm.username" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="dataForm.gender" >
                <el-radio-button label="男" value="男"></el-radio-button>
                <el-radio-button label="女" value="女"></el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status">
            <el-switch
                v-model="dataForm.status"
                inline-prompt
                active-text="是"
                inactive-text="否"
            />
        </el-form-item>
        <el-form-item label="时间段" prop="daterang">
            <el-date-picker
                v-model="dataForm.daterange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :size="size"
            />
        </el-form-item>
        <el-form-item label="所在地" prop="area">
            <el-cascader v-model="dataForm.area" :options="options" placeholder="请选择地区" />
        </el-form-item>
      </el-form>
       {{dataForm}}


    </div>
    <script type="module">
        var c = 0;
        const app = Vue.createApp({
            //响应式变量
            data(){
                return {
                   dataForm:{} ,
                   rules:{
                    username:[{ required: true, message: '用户名不能为空', trigger: 'blur' },{ min: 6, max: 20, message: '用户名必须是6-20位', trigger: 'blur' }],
                    gender:[{ required: true, message: '性别名不能为空', trigger: 'blur' }]
                   },
                   options:[{
                      value: '河南省',
                      label: '河南省',
                      children:[
                        {
                            label:'郑州市',
                            value:'郑州市'
                        },
                        {
                            label:'洛阳市',
                            value:'洛阳市'
                        }
                      ]
                   }]
                }
            },
            //方法 
            methods:{
                
            },
            //初始化事件
            mounted(){

            }
        }).use(ElementPlus).mount("#app");
    </script>

<pre>
  
</body>
</html>